/******************************************************************************************
 * Import
 ******************************************************************************************/

// module
import React, {Component} from 'react';
import {View, StyleSheet, Dimensions, TextInput} from 'react-native';
import { Icon, Picker, List, Toast } from 'antd-mobile-rn';

// project
import {
    Page, Content, Header, Row, Between, Float, Hand, ItemY, Text, ButtonOpacity, TouchOpacity
} from '../../../../library';
import HttpTemp from '../../../../preset/func/http/httptemp';


/******************************************************************************************
 * Export
 ******************************************************************************************/

export default class EssentialInfo extends Component {

    /*------------------------------------------------------------------------------------
	 * 初始化
	 *-----------------------------------------------------------------------------------*/
    constructor (props) {
        super(props);
        this.Nav = this.props.navigation;

        /**
         * state
         */
        this.state = {
            sexList:[
                {
                    label:'请选择',
                    value:'请选择',
                },
                {
                    label:'男',
                    value:'男'
                },
                {
                    label:'女',
                    value:'女'
                }
            ],
            sex:['请选择'],
            name:'',
            nation:'',
            location:'',
            idCard:''
        }
    }

    
    /*------------------------------------------------------------------------------------
	 * 生命周期
	 *-----------------------------------------------------------------------------------*/
    componentDidMount() {
        // SplashScreen.hide();
        
        // 获取信息
        HttpTemp.get({
            url:'/page/user/detail.php',
            success:(res)=>{
                this.setState({
                    sex:[res.data.set_real_sex],
                    name:res.data.set_real_name,
                    nation:res.data.set_real_nation,
                    location:res.data.set_real_nativeplace,
                    idCard:res.data.set_real_idcard_numb,
                })
                console.log('res++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++',res)
            }
        })
    }

    /*------------------------------------------------------------------------------------
	 * 自定义方法
	 *-----------------------------------------------------------------------------------*/
    /**
     * 选择器赋值，性别
     */
    onChange = (sex) => {
        console.log('sex',sex);
        this.setState({ sex:sex });
        console.log('this.state.sex',this.state.sex);
    }

    /**
     * 证件号码填写赋值
     */
    changeIdcard = (idCard) => {
        this.setState({ idCard:idCard})
    }
    /**
     * 真实姓名填写赋值
     */
    changeName = (name) => {
        this.setState({ name:name})
    }
    /**
     * 籍贯填写赋值
     */
    changeLocation = (location) => {
        this.setState({ location: location })
    }
    /**
     * 籍贯填写赋值
     */
    changeNation = (nation) => {
        this.setState({ nation: nation })
    }

    /**
     * 保存更改,更新用户数据接口
     */
    confirm = (sex) => {
        console.log('this.state++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++',this.state)
        HttpTemp.post({
            url:'/page/user/logic/update.php',
            data:{
                set_real_sex:this.state.sex.join(''),
                set_real_name:this.state.name,
                set_real_nation:this.state.nation,
                set_real_nativeplace:this.state.location,
                set_real_idcard_numb:this.state.idCard
            },
            success:(res) => {
                Toast.info('提交成功',3);
                this.setState();
            }
        })
    }

    /*------------------------------------------------------------------------------------
	 * 渲染
	 *-----------------------------------------------------------------------------------*/
    render(){
            const windowWidth = Dimensions.get('window').width;
            return(
            <Page>
                {/* 此页面背景色为 f8f8f8 */}
                <Content bg='#f8f8f8' mt='48' mb='100'>
                    <Row mt='20' bg='#fff' pl='10'>
                        <ItemY>
                            <Between pa='15' h='43' bb='solid 1 #f0f0f0' bg='#fff' f='1'>
                                <Text color="#434343" f="1">真实姓名</Text>
                                <TextInput
                                    style={{ flex:1, minWidth:150, height:43, justifyContent:"center", textAlign:"right" }}
                                    defaultValue={this.state.name}
                                    clearTextOnFocus={true}
                                    placeholder="请输入真实姓名"
                                    placeholderTextColor="#c9c9c9"
                                    underlineColorAndroid="transparent"
                                    onChangeText={this.changeName}
                                />
                            </Between>
                            <TouchOpacity active={1} w={windowWidth}>
                                <Between pa='15' h='43' bb='solid 1 #f0f0f0' bg='#fff' f='1'>
                                    <Hand x='left' y='center'>
                                        <Text color='#333'>性别</Text>
                                    </Hand>
                                    <Hand x='right' y='center'>
                                        <View style={{flex:1}}>
                                            <Picker
                                                data={this.state.sexList}
                                                value={this.state.sex}
                                                onOk={this.onChange}
                                                // onDismiss={e => console.log('dismiss', e)}
                                                style={{flex:1,width:'100%',backgroundColor:'#0f0',fontSize:12}}
                                                cols={1}
                                                itemStyle={styles.itemStyle}
                                                ><List.Item arrow="horizontal"> </List.Item>
                                            </Picker>
                                        </View>
                                        <Icon type='right' size='xxs' color='#b2b2b2'></Icon>
                                        {/* 此icon为右箭头，已使用上面List.Item的arrow属性指定 */}
                                    </Hand>
                                </Between>
                            </TouchOpacity>
                            <Between pa='15' h='43' bb='solid 1 #f0f0f0' bg='#fff' f='1'>
                                <Text color="#434343" f="1">民族</Text>
                                <TextInput
                                    style={{ flex:1, minWidth:150, height:43, justifyContent:"center", textAlign:"right" }}
                                    defaultValue={this.state.nation}
                                    clearTextOnFocus={true}
                                    placeholder="请输入所属民族"
                                    placeholderTextColor="#c9c9c9"
                                    underlineColorAndroid="transparent"
                                    onChangeText={this.changeNation}
                                />
                            </Between>
                            <Between pa='15' h='43' bb='solid 1 #f0f0f0' bg='#fff' f='1'>
                                <Text color="#434343" f="1">籍贯</Text>
                                <TextInput
                                    style={{ flex:1, minWidth:150, height:43, justifyContent:"center", textAlign:"right" }}
                                    defaultValue={this.state.location}
                                    clearTextOnFocus={true}
                                    placeholder="请输入籍贯地址"
                                    placeholderTextColor="#c9c9c9"
                                    underlineColorAndroid="transparent"
                                    onChangeText={this.changeLocation}
                                />
                            </Between>
                            <Between pa='15' h='43' bb='solid 1 #f0f0f0' bg='#fff' f='1'>
                                <Text color="#434343" f="1">证件号码</Text>
                                <TextInput
                                    style={{ flex:1, minWidth:150, height:43, justifyContent:"center", textAlign:"right" }}
                                    defaultValue={this.state.idCard}
                                    maxLength={18}
                                    clearTextOnFocus={true}
                                    placeholder="请输入证件号码"
                                    placeholderTextColor="#c9c9c9"
                                    underlineColorAndroid="transparent"
                                    onChangeText={this.changeIdcard}
                                />
                            </Between>
                        </ItemY>
                    </Row>
                </Content>

                {/* 提交 star */}
                <Float pa='15' pt='36' left='50%' bottom='20' ml='-40' w='340'>
                    <ButtonOpacity onPress={this.confirm} active={0.7} ra='5' bg='#02b349' f='1' py='10' color='#fff' size='16'>提交</ButtonOpacity>
                </Float>
                {/* 提交 end */}

                {/* 顶部 star */}
                <Header h='48' y='center' bg='#fff'>
                    <Between px='10'>
                        <TouchOpacity active={0.6} onPress={(e)=> {
                                this.Nav.goBack()
                        }}>
                            <Icon type='left' size='md' color='#00CC66' />
                        </TouchOpacity>
                        <Text style={{ alignContent:"center" }} size='17'>基本信息</Text>
                        <Text> </Text>
                    </Between>
                </Header>
                {/* 顶部 star */}
            </Page>
        )
    }
}

const styles = StyleSheet.create({
    itemStyle:{
        fontSize:16,
        color:'#333',
        lineHeight:30
    }
})


/*------------------------------------------------------------------------------------
* 备用
*-----------------------------------------------------------------------------------*/
// 籍贯跳页版，通用 star
{/* <TouchOpacity active={1} w={windowWidth}>
        <Between pa='15' h='43' bb='solid 1 #f0f0f0' bg='#fff' f='1'>
        <Hand x='left' y='center'>
            <Text color='#333'>籍贯</Text>
        </Hand>
        <Hand x='right' y='center'>
            <Text color='#aeaeae' size='13'>{this.state.location}</Text>
            <Icon type='right' size='xxs' color='#b2b2b2'></Icon>
        </Hand>
    </Between> 
</TouchOpacity> */}
// 籍贯挑页版，通用 end